<template>
    <div id='auth-apply-wait'>
        <!-- <h1 class="card-title">
           <p><span>放款记录</span></p>
            <div class="card-title__button-box">
                <button-loading :percent='percent' :loading='loading_download' @click='download'>下载列表</button-loading>
            </div>
        </h1> -->
        <div class="form-table">
            <div class="form-content">
                <!-- <div class="form-item half">
                    <div class="form-item__key">实际放款时间(开始)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='startLendTime' key='startLendTime' placeholder='选择开始时间' v-model='startLendTime'></picker-date>
                    </div>
                </div>
                <div class="form-item half">
                    <div class="form-item__key form-item__key2">实际放款时间(结束)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='endLendTime' key='endLendTime' placeholder='选择结束时间' v-model='endLendTime'></picker-date>
                    </div>
                </div>
                <div class="form-item half">
                    <div class="form-item__key form-item__key1">应还款时间(开始)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='startRepayTime' key='startRepayTime' placeholder='选择开始时间' v-model='startRepayTime'></picker-date>
                    </div>
                </div>
                <div class="form-item half">
                    <div class="form-item__key form-item__key1 form-item__key2">应还款时间(结束)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='endRepayTime' key='endRepayTime' placeholder='选择结束时间' v-model='endRepayTime'></picker-date>
                    </div>
                </div>
                <div class="form-item half">
                    <div class="form-item__key">实际还款时间(开始)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='actualRepayTimeFrom' key='actualRepayTimeFrom' placeholder='选择开始时间' v-model='actualRepayTimeFrom'></picker-date>
                    </div>
                </div>
                <div class="form-item half">
                    <div class="form-item__key form-item__key2">实际还款时间(结束)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='actualRepayTimeTo' key='actualRepayTimeTo' placeholder='选择结束时间' v-model='actualRepayTimeTo'></picker-date>
                    </div>
                </div> -->
                <div class="box">
                    <div class="form-item">
                    <div class="form-item__key">姓名：</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入姓名" v-model='name'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">手机号：</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入手机号码" v-model='phone'>
                    </div>
                </div>
                <a class="card-title__button" @click='getList()'>搜索</a>
                </div>
                <!-- <div class="form-item">
                    <div class="form-item__key">业务类型：</div>
                    <div class="form-item__value">
                        <select-box v-model='businessType' text='所有'>
                            <select-option value='' text='所有'></select-option>
                            <select-option :value='1' text='还本付息'></select-option>
                            <select-option :value='2' text='展期'></select-option>
                        </select-box>
                    </div>
                </div> -->
            
            </div>
        </div>
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-else='loading'>
            <table v-show="!loading">
                <thead class="table-list__head">
                    <tr>
                        <th>序号</th>
                        <th>借款人</th>
                        <th>手机号码</th>
                        <th>借款金额</th>
                        <th>借款时长</th>
                        <th>到账金额</th>
                        <th>服务费</th>
                        <th>实际放款时间</th>
                        <th>应还款日</th>
                        <th>实际还款时间</th>
                        <!-- <th>业务类型</th> -->
                        <th>状态</th> 
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records'>
                        <td>{{ item.number || placeholder }}</td>
                        <td>{{ item.name || placeholder }}</td>
                        <td>{{ item.phone || placeholder }}</td>
                        <td>{{ item.lendAmount | toYuan }}</td>
                        <td>{{ item.lendCycle || placeholder }}天</td>
                        <td>{{ item.realLendAmount | toYuan }}</td>
                        <td>{{ item.serviceAmount | toYuan }}</td>
                        <td>{{ item.lendTime || placeholder }}</td>
                        <td>{{ item.needRepayTime || placeholder }}</td>
                        <td>{{ item.repayTime || placeholder }}</td>
                        <!-- <td>{{ item.businessType || placeholder }}</td> -->
                        <td>{{ item.status || placeholder }}</td>
                        <td v-if="item.newStatus!=true">
                                <el-button type="text" @click='zqfn(item.lendId)'>展期</el-button>
                                <el-button type="text" @click='showAllModal(item.lendId)'>操作还款</el-button>
                                <!-- <el-button type="text" @click='showPartModal(item.lendId)'>部分结清</el-button> -->
                        </td>
                        <!-- <td v-else-if="item.status!='已展期'">
                            <el-button type="text" @click='zqfn(item.lendId)'>展期</el-button>
                            <el-button type="text" @click='showAllModal(item.lendId)'>全部结清</el-button>
                            <el-button type="text" @click='showPartModal(item.lendId)'>部分结清</el-button>
                        </td> -->
                        <td v-else>
                            
                        </td>
                    </tr>
                </tbody>
            </table>
                <el-pagination v-show="!loading&&records.length!==0" class="pan"  @current-change="handleCurrentChange" :current-page="listInfo.pageNum"  layout="total, prev, pager, next, jumper" 
                        :total="listInfo.totalCount" :background="true">
                </el-pagination>
        </div>

     <modal  
            :show='show_modal_extend' 
            title='展期确定'
            :loading='loading_confirm'
            @confirm='confirmExtend'
            @close='show_modal_extend=false'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                     <li class='form-item'>
                        <span class="form-item__key">申请人</span>
                        <div class="form-item__value">
                            <p class="item">{{loanInfo.name || placeholder}} {{loanInfo.phone || placeholder}}</p>
                        </div>
                    </li>
                    
                    <li class='form-item'>
                        <span class="form-item__key">展期时间</span>
                        <div class="form-item__value">
                            <p style="margin-left:10px;">{{extendDays}} 天</p>
                            <!-- <input type="text" v-model='extendDays' @input='confirmExtendAmount' :placeholder="'最高 '+report.extendDays+' 天'"> -->
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">展期操作时间</span>
                        <div class="form-item__value">
                            <el-date-picker
                            v-model="extendStartTime"
                            @change="changeFn"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </li>
                   <li class='form-item'>
                        <span class="form-item__key">展期费用</span>
                        <div class="form-item__value">
                            <p class="item">{{extendAmount | toYuan}}元</p>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

         <modal  
            :show='show_modal_all_repay' 
            :loading='loading_confirm'
            @confirm='confirmRepay'
            width="40%"
            @close='closeRepayFn'>
            <div class="modal-form-wrap">
                <el-tabs v-model="activeName1" @tab-click="handleClick" type="card">
                    <el-tab-pane label="操作还款" name="first">
                        <ul class='modal-form' >
                    <li class='form-item'>
                        <span class="form-item__key">应还款总额（元）</span>
                        <div class="form-item__value">
                                <p class="item">{{allRepayAmount| toYuan}}</p>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">还款金额（元）</span>
                         <div class="inp">
                             <el-input  placeholder="输入金额" v-model="repaymentMoney" clearable></el-input>
                         </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">减免金额（元）</span>
                         <div class="inp">
                             <el-input  placeholder="输入金额" v-model="priceNum" clearable></el-input>
                         </div>
                    </li>
                    <li class='form-item fromcopy'>
                        <span class="form-item__key">还款时间</span>
                        <div class="form-item__value">
                            <el-date-picker
                              clearable
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-model="time"
                              @change="allRepayFn"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </li>
                     <li class='form-item'>
                        <span class="form-item__key">还款方式</span>
                         <div class="inp">
                            <el-select v-model="selectValue" placeholder="请选择">
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                         </div>
                    </li>
                </ul>
                    </el-tab-pane>
                    <el-tab-pane label="还款记录" name="second">
                    <loading v-show="repayLoading"></loading> 
                        <el-table
                          :data="tableData"
                          v-show="!repayLoading"
                          style="width: 100%">
                          <el-table-column
                            prop="repayTime"
                            align="center"
                            label="还款时间">
                          </el-table-column>
                          <el-table-column
                            prop="repayAmount"
                            align="center"
                            label="还款金额">
                          </el-table-column>
                          <el-table-column
                            prop="remissionAmount"
                            align="center"
                            label="减免金额">
                          </el-table-column>
                           <el-table-column
                            prop="repayType"
                            align="center"
                            label="还款方式">
                          </el-table-column>
                           <el-table-column
                            prop="operatorName"
                            align="center"
                            label="操作人">
                          </el-table-column>

                        </el-table>
                    </el-tab-pane>
                    
                  </el-tabs>
                <!--  -->
            </div>
        </modal>

         <modal  
            :show='show_modal_part_repay' 
            title='部分结清'
            :loading='loading_confirm'
            @confirm='confirmRepayPart'
            @close='show_modal_part_repay=false'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">应还款（元）</span>
                        <div class="inp">
                             <el-input  placeholder="输入金额" v-model="amount" clearable></el-input>
                         </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">减免金额</span>
                         <div class="inp">
                             <el-input  placeholder="输入金额" v-model="priceNumOther" clearable></el-input>
                         </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">还款时间</span>
                        <div class="form-item__value">
                            <el-date-picker
                              clearable
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-model="time1"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </li>
                     <li class='form-item'>
                        <span class="form-item__key">还款方式</span>
                         <div class="inp">
                            <el-select v-model="selectValue1" placeholder="请选择">
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                         </div>
                    </li>
                </ul>
                <textarea class='modal__textarea' rows="5" placeholder="请输入部分结清备注" v-model='remarks'></textarea> 
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { financeApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            pagination,
            buttonLoading,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                recommend:0,
                percent:0,
                curItem:{},
                taskId:'',
                loading_download:false,
                phone:'',
                showConfirm:false,
                showFreeze:false,
                startTime:'',
                endTime:'',
                businessType:'',
                title:'',
                tip:'',
                channel:'',
                channel1:'',
                channel2:'',
                name:'',
                name1:'',
                name2:'',
                userCount:'',
                curDetail:'',
                listInfo:{},
                listInfo1:{},
                listInfo2:{},
                records:[],
                records1:[],
                records2:[],
                dateFrom:'',
                dateFrom1:'',
                dateFrom2:'',
                dateTo:'',
                dateTo1:'',
                dateTo2:'',
                mobile:'',
                mobile1:'',
                mobile2:'',
                type:'',
                loading:false,
                loading1:true,
                loading2:true,
                loading_count:true,
                pageSize:12,
                show_modal_extend:false,
                extendDays:'',
                loading_confirm:false,
                extendAmount:"",
                id:"",
                loanInfo:{},
                report:"",
                show_modal_all_repay:false,
                loading_confirm:false,
                allRepayAmount:"",
                priceNum:"",
                time:"",
                selectValue:"1",
                 options: [{
                  value: '1',
                  label: '支付宝还款'
                },{
                  value: '2',
                  label: '银行卡还款'
                },{
                  value: '4',
                  label: "微信"
                }],
                amount:"",
                priceNumOther:"",
                time1:"",
                selectValue1:"2",
                remarks:"",
                show_modal_part_repay:false,
                input10:"",
                extendStartTime:"",
                activeName1:"first",
                repaymentMoney:"",
                tableData:[],
                repayLoading:false,

            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),

            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setListInfo'
            ]),
            getRepayRecordListFn(){
                this.repayLoading=true;
                financeApi.getRepayRecordList({
                    id:this.id,
                })
                .then(result=>{
                    console.log(result.page)
                    this.repayLoading=false;
                    this.tableData=result.page
                })
                .catch(error => {
                    this.repayLoading=false;
                    console.error(error)
                })
            },
            closeRepayFn(){
                this.show_modal_all_repay=false
                this.clearFN()
            },
            confirmExtendAmountFn(){
                financeApi.confirmExtendAmount({
                    id:this.id,
                    extendDays:this.extendDays,
                    extendOperTime:this.extendStartTime,
                })
                .then(result=>{
                    this.extendAmount=result.confirmExtendAmount
                })
                .catch(error => {
                    console.error(error)
                })
            },
            //这里分开掉接口
            changeFn(res){
                this.extendStartTime=res
                this.confirmExtendAmountFn()
            },
            handleClick(tab, event){
                console.log(tab)
            },
            allRepayFn(){
                this.lendUpdateRepayTimeFn()
            },
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.getList(val);
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            getInfo(){
                financeApi.detail({
                    id:this.id
                })
                .then(result=>{
                    this.info = result
                    this.loanInfo=this.info.report.loanInfo
                    this.report=this.info.report
                    this.extendDays=this.info.report.extendDays
                    /*if(this.info.report && this.info.report.loanInfo){
                        this.account = this.info.report.loanInfo.underLinePayNo
                    }*/
                    this.confirmExtendAmountFn()
                })
                .catch(error => {
                    console.error(error)
                })
            },
            zqfn(id){
                this.id=id
                this.show_modal_extend = true
                this.getInfo()
                this.extendStartTime=moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                
                //this.changeFn()
                
            },
            /*confirmExtendAmount(){
                if(this.extendDays){
                    this.loading_confirm_amount = true
                    financeApi.confirmExtendAmount({
                        id:this.id,
                        extendDays:this.extendDays,
                    })
                    .then(result=>{
                        this.loading_confirm_amount = false
                        this.extendAmount = result.confirmExtendAmount
                    })
                    .catch(error => {
                        console.error(error)
                        this.loading_confirm_amount = false
                    }) 
                }
            },*/
            clearFN(){
                this.repaymentMoney=""
                this.priceNum=""
                this.selectValue='1'
            },
            showAllModal(id){
                this.id=id
                this.show_modal_all_repay=true;
                this.time=moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                this.lendUpdateRepayTimeFn()
                this.getRepayRecordListFn()
                this.clearFN()
            },
            lendUpdateRepayTimeFn(){
                
                var msg={
                    repayTime:this.time,
                    id:this.id,
                }
                financeApi.lendUpdateRepayTime(msg)
                .then(result=>{
                    this.allRepayAmount=result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            confirmRepay(){
                if(this.priceNum==0&&this.repaymentMoney==0){
                    this.setMsgTip({
                        text:"还款金额和减免金额不能同时为0",
                        type:'error'
                    })
                    return false
                }
                this.loading_confirm = true
                financeApi.lendOperatRepay({
                    id:this.id,
                    repayTime:this.time,
                    needRepayAmount:this.allRepayAmount,
                    remissionAmount:this.priceNum,
                    repayAmount:this.repaymentMoney,
                    repayType:this.selectValue
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_all_repay = false
                    console.log(this.currentPage)
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            showPartModal(id){
                this.id=id
                this.amount = ''
                this.priceNumOther=""
                this.remarks = ''
                this.time1=null
                this.show_modal_part_repay = true
            },
            confirmRepayPart(){
                this.loading_confirm = true
                financeApi.addRepayPartRemarks({
                    id:this.id,
                    repayTime:this.time1,
                    remarks:this.remarks,
                    partAmount:this.amount,
                    remissionAmount:this.priceNumOther,
                    repayType:this.selectValue1
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_part_repay = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            goDetail(id){
                // this.$router.replace({
                //     name:'finance-out',
                //     query:_.merge({},this.$route.query,{
                //         num:this.listInfo.pageNum
                //     })
                // })
                this.$router.push({
                    name:'finance-detail',
                    params:{
                        id:id
                    }
                })
            },
            confirmExtend(){
                console.log(this.confirmExtend)
                this.loading_confirm = true
                financeApi.extendTime({
                    id:this.id,
                    extendDays:this.extendDays,
                    extendOperTime:this.extendStartTime,
                    extendAmount:this.extendAmount
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_extend = false
                    this.extendDays = ''
                    this.extendAmount = ''
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            showModalDetail(item){
                this.show_modal_detail = true
                this.curDetail = item
            },
            download(){
                this.loading_download = true
                financeApi.downLoadLendRecordDataList({
                    phone:this.phone,
                    name:this.name,
                    businessType:this.businessType,
                })
                .then(result=>{
                    this.taskId = result.taskId
                    this.downloadUrl = result.downloadUrl
                    this.getAsyncResult()
                })
                .catch(error => {
                    this.loading_download = false
                    console.error(error)
                })
            },
            getAsyncResult(){
                allApi.getAsyncResult({
                    taskId:this.taskId
                })
                .then(result=>{
                    if(!result.finish){
                        this.percent = result.percent
                        setTimeout(()=>{
                            this.getAsyncResult()
                        },2000)
                    }
                    else{
                        this.setMsgTip({
                            text:'正在下载',
                            type:'success'
                        })
                        location.href = this.downloadUrl
                        this.loading_download = false
                        this.percent = 0
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading_download = false
                })
            },
            getList(num = 1){
                this.setListInfo({
                    name:this.$route.name,
                    info:{
                        pageIndex:num,
                        phone:this.phone,
                        name:this.name,
                        businessType:this.businessType,
                    }
                })
                this.loading = true
                financeApi.lendRecordDataList({
                    pageSize:10,
                    pageIndex:num,
                    phone:this.phone,
                    name:this.name,
                    businessType:this.businessType,
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    for(var i = 0;i<this.records.length; i++ ){
                        console.log(this.records[i].status)
                       if(this.records[i].status=="已还清"){
                            this.records[i].newStatus=true
                       }else if(this.records[i].status=="已展期"){
                            this.records[i].newStatus=true
                       }else{
                             this.records[i].newStatus=false
                       }
                    }
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            reset(){
                this.phone = ''
                this.name = ''
                this.businessType = ''
            },
            init(){
                
                this.getList(1)
            }
        },
        created(){
            this.init()
            this.name=""
            this.phone=""
        },
        /*watch: {
            '$route' (to, from) {
                this.init()
            }
        }*/
    }
</script>
<style scoped>
    body .card-title__button-box .component-button-loading{
        width: 100%;
    }    
    body .card-title__button-box .component-button-loading{
        margin-left: 0;
    }
    .card-title__button-box{
        width: 125px;
    }
    body .card-title{
        padding-bottom: 20px;
        padding-top:80px;
    }
    body .card-title__button-box .component-button-loading__button{
        margin-left: 0;
    }
    body .form-item__value{
        width: 193px;
        color: #333;
        font-size: 16px;
    }
    body .form-item{
        font-size: 16px;
    }
    body .form-item__key1{
        margin-right: 16px;
    }
    body .form-table .form-item{
        padding: 0px 10px 20px;
    }
    .box{
        width: 100%;
    }
    /* body .form-table .form-item.half{
        width: 546px;
    }
    .form-item__key2{
       margin-left:168px;
       } */
        .card-title__button{
            float: left;
        }
       .box .form-item{
            float: left;
       }
      
</style>
<style>
    #auth-apply-wait .el-button{
            padding:0!important;
        }
        #auth-apply-wait .el-button+.el-button{
            margin-left: 0px;
        }
        #auth-apply-wait .el-table{
            height: 300px;
            overflow-y: scroll;
        }
</style>  
<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #user-index{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;

        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
            }
            p{
                padding-top: 10px;
            }
        }
        .report-detail-button{
            color:$green;
            cursor:pointer;
        }
        .modal-recommend{
            .form-item__value{
                flex:1;
            }
            min-height:330px;
        }
        
    }
    .option-boxs{
        width: 287px;
        height:40px;
        margin:0;
        padding:0;
    }
    .fl{
        float: left!important;
    }
    .modal-form-wrap{
        margin-top: 20px;
        font-weight: normal;
        
        .el-tabs__item{
            font-size: 16px;
        }
    }
    .pan{
        margin-top: 10px;
    }
</style>
